<template>
    <view class="banner-container">
        <swiper class="banner-swiper" circular autoplay :interval="interval" :duration="duration" indicator-dots
            indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, 0.3)" @change="handleChange">
            <swiper-item v-for="(item, index) in banners" :key="index" @click="handleBannerClick(item, index)">
                <view class="banner-item">
                    <image class="banner-image" :src="item.image" mode="aspectFill" @load="handleImageLoad(index)"
                        @error="handleImageError(index)"></image>
                    <view class="banner-loading" v-if="!imageLoadStatus[index]">
                        <view class="loading-spinner"></view>
                    </view>
                    <view class="banner-error" v-if="imageErrorStatus[index]">
                        <text class="error-text">图片加载失败</text>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    name: 'BannerSwiper',
    props: {
        banners: {
            type: Array,
            required: true,
            default: () => []
        },
        interval: {
            type: Number,
            default: 3000
        },
        duration: {
            type: Number,
            default: 500
        }
    },
    data() {
        return {
            imageLoadStatus: {},
            imageErrorStatus: {},
            currentIndex: 0
        }
    },
    methods: {
        handleImageLoad(index) {
            this.$set(this.imageLoadStatus, index, true)
            this.$set(this.imageErrorStatus, index, false)
        },
        handleImageError(index) {
            this.$set(this.imageLoadStatus, index, true)
            this.$set(this.imageErrorStatus, index, true)
        },
        handleBannerClick(item, index) {
            this.$emit('click', { item, index })
            // 预览图片
            if (!this.imageErrorStatus[index]) {
                uni.previewImage({
                    urls: this.banners.map(banner => banner.image),
                    current: index
                })
            }
        },
        handleChange(e) {
            this.currentIndex = e.detail.current
            this.$emit('change', e.detail.current)
        }
    }
};
</script>

<style>
.banner-container {
    width: 100%;
    position: relative;
}

.banner-swiper {
    width: 100%;
    height: 350rpx;
    border-radius: 20rpx;
    overflow: hidden;
}

.banner-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-image {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
    transition: transform 0.3s ease;
}

.banner-loading,
.banner-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
}

.loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.error-text {
    color: #ffffff;
    font-size: 28rpx;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>